/<template>
  <div class="address">
    <div class="head">
      <span @click="goBack">返回</span>
      <b>地址管理</b>
      <span>管理</span>
    </div>
    <div class="body">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div>
            <span>{{ item.name }}</span>
            <span>{{ item.tel }}</span>
          </div>

          <div>
            <span>{{ item.city }}</span>
            <span>{{ item.county }}</span>
          </div>

          <div>
            <input
              type="checkbox"
              v-model="item.isDefault"
              @change="changeDefault(item)"
            />
            <span v-if="item.isDefault">已设为默认</span>
            <span v-else>设为默认</span>
            <button>置顶</button>
            <button>复制</button>
            <button>删除</button>
            <button>修改</button>
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <button @click="openMask">添加收货地址</button>
    </div>
    <!-- vant 的弹窗 -->
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <h2>{{ title }}</h2>
          <!-- vant的地址编辑 -->
          <van-address-edit
            :address-info="addressInfo"
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['省', '市', '区/县']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
          />
          <!-- :address-info="addressInfo" // 表单数据
            :area-list="areaList"// 选择城市的数据列表
            show-postal // 是否展示邮编
            show-delete // 是否展示删除按钮
            show-set-default // 是否展示默认按钮
            show-search-result // 是否可以搜索地址详情
            :search-result="searchResult" // 搜索详情地址列表数据
            :area-columns-placeholder="['省', '市', '区/县']"// 选择城市默认项
            @save="onSave" // 保存事件
            @delete="onDelete" //删除事件
            @change-detail="onChangeDetail" // 详情输入事件（用于搜索详情） -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import axios from "axios";
// vant的提示组件
import { Toast } from "vant";
// vant提供的地址数据，需要单独下载
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      list: [],
      show: false, //是否展示弹窗
      areaList, // vant的城市数据
      searchResult: [], // 详细地址搜索内容
      title: "新增收货地址",
      addressInfo: {},
      index: null,
    };
  },
  mounted() {
    axios.get("/getAddress").then((res) => {
      this.list = res.data;
      console.log(this.list);
    });
  },
  methods: {
    // 返回上一个页面
    goBack() {
      this.$router.go(-1);
    },
    changeDefault(item) {
      if (item.isDefault) {
        this.list.map((v) => {
          v.isDefault = false;
        });
        item.isDefault = true;
      }
    },
    // 删除地址
    deleteAddress(index) {
      // 接受下标，通过下标截取一个
      this.list.splice(index, 1);
      Toast("已删除");
    },
    // 点击新增按钮，打开弹窗
    openMask() {
      this.show = true;
      // 弹窗的标题，区分新增还是修改
      this.title = "新增收货地址";
    },
    // 点击修改打开弹窗
    editMask(item, index) {
      this.show = true;
      // 弹窗的标题，区分新增还是修改
      this.title = "修改收货地址";
      // 把当前要修改的地址数据，赋值给表单
      this.addressInfo = item;
      // 记录当前编辑的下标
      this.index = index;
    },
    // 保存地址
    onSave(value) {
      //       addressDetail: "北京市海淀区上地街道57号 北京八维研修学院"
      // areaCode: "120101"
      // city: "天津市"
      // country: ""
      // county: "和平区"
      // isDefault: false
      // name: "申晓庆"
      // postalCode: "123456"
      // province: "天津市"
      // tel: "15112341234"
      
       // push或修改之前，先判断当前的是不是默认，
      //  如果是把其他的都改为false
      if (value.isDefault) {
        this.list.map((v) => {
          v.isDefault = false;
        });
      }
           // 区分新增还是修改
      if (this.title == "新增收货地址") {
        // 如果是新增往数据中push新的地址
        this.list.push(value);
      } else {
        // 如果是修改，把当前下标项重新赋值
        this.list[this.index] = value;
      }
      this.addressInfo = {};
      this.show = false;
      Toast("已保存");
    },
    // 删除地址
    onDelete() {
      this.show = false;
      Toast("已删除");
    },
    // 地址详情输入时可以搜索
    onChangeDetail(val) {
      if (val) {
        // 详情地址搜索内容˝
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
          {
            name: "北京八维研修学院",
            address: "北京市海淀区上地街道57号",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>

<style lang='scss'>
.address {
  display: flex;
  flex-direction: column;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
  .body li {
    width: 100%;
    height: 200px;
    padding: 10px;
    background: #eee;
    margin-top: 10px;
    div {
      padding: 10px 0;
      span {
        display: inline-block;
        padding: 5px;
      }
      button{
        width: 40px;
        margin: 5px;
      }
    }
  }
  .foot {
  height: 60px;
  padding: 10px;
  button {
    width: 100%;
    height: 100%;
    background: #f60;
    border: 0;
    color: #fff;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 500px;
  background-color: #fff;
}
}
</style>
